import React from 'react'
import dayjs from 'dayjs'
import { Button, Form, Input, DatePicker } from 'antd'
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN'


interface SearchType {
    (serarchParams: {
        key: string, start: string, end: string
    }): void
}
interface PropType {
    onSearch: SearchType
}


export default function SearchBar(props: PropType) {
    const serarchParams = {
        key: '',
        start: '',
        end: ''
    }
    const onSearch = (params: any) => {
        serarchParams.key = params.key
        if (params.time) {
            serarchParams.start = dayjs(params.time[0]).format('YYYY-MM-DD')
            serarchParams.end = dayjs(params.time[1]).format('YYYY-MM-DD')
        }
        props.onSearch(serarchParams)
    }
    return (
        <Form
            initialValues={{ remember: true }}
            autoComplete="off"
            layout='inline'
            onFinish={onSearch}
        >
            <Form.Item
                label="关键字"
                name="key"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Input placeholder='请输入关键字搜索' />
            </Form.Item>

            <Form.Item label="日期" name="time">
                <DatePicker.RangePicker locale={locale} />
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
            </Form.Item>
        </Form>
    )
}
